<template>
  <div>
    <p>我是子组件---{{ countprop }}</p>
    <ul>
      <li v-for="item in boyarrprops" :key="item">{{ item }}</li>
    </ul>
    <!-- 方式1: 直接在行内写事件执行函数 -->
    <!-- <button @click="$emit('myevent', userobj)">子传父</button> -->

    <!-- 方式2: 使用defineEmites 来注册自定义事件 -->
    <button @click="emitFn">子传父-方式2</button>
  </div>
</template>

<script setup>
// 在子组件中使用defineProps 来定义接收的属性
// 语法: const props = defineProps([接收的属性名,.....])
// props 为接收非父传子的属性集合
import { defineProps, ref, defineEmits } from "vue";
const props = defineProps(["countprop", "boyarrprops"]);
// console.log(props.countprop);
const userobj = ref({ name: "胡歌", age: 20 });

// 定义emitFn 这个执行函数
const emit = defineEmits(["myevent"]);
const emitFn = () => {
  //   console.log("子传父22");
  emit("myevent", userobj);
};
</script>
<style scoped>
</style>